const path = require("path");
const webpack = require("webpack");
const defaultSettings = require("./src/settings.js");
const { defineConfig } = require("@vue/cli-service");

const resolve = (dir) => path.join(__dirname, dir);

const name = defaultSettings.title; // 网址标题
const port = 8089; // 端口配置

// 压缩配置文件
const CompressionPlugin = require("compression-webpack-plugin");
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

// 是否为生产环境
const isProduction = process.env.NODE_ENV !== "development";
// 开发环境是否需要使用cdn
const devNeedCdn = false;
// 第三方包都会有script引入方案，只需要打包的时候忽略制定第三方包，然后在模板上加上相应的导入链接
const cdn = {
  // cdn：模块名称和模块作用域命名（对应window里面挂载的变量名称）
  // 忽略打包的第三方库
  externals: {
    vue: "Vue",
    "element-ui": "ELEMENT",
    "vue-router": "VueRouter",
    vuex: "Vuex",
    axios: "axios",
    dayjs: "dayjs",
    jquery: "$",
    "vue-lazyload": "VueLazyload",
    // echarts: "echarts",
  },
  // 通过cdn方式使用
  js: [
    "https://cdn.bootcss.com/vue/2.6.14/vue.runtime.min.js",
    "https://cdn.bootcss.com/vue-router/3.6.5/vue-router.min.js",
    "https://cdn.bootcss.com/vuex/3.6.2/vuex.min.js",
    "https://cdn.bootcss.com/axios/1.1.3/axios.min.js",
    "https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.5/dayjs.min.js",
    "https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.10/index.js",
    "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js",
    "https://cdn.bootcdn.net/ajax/libs/vue-lazyload/1.3.4/vue-lazyload.min.js",
    // "https://cdn.bootcss.com/echarts/3.7.1/echarts.min.js",
  ],
  css: ["https://unpkg.com/element-ui@2.15.10/lib/theme-chalk/index.css"],
};

module.exports = defineConfig({
  productionSourceMap: false, // 关闭打包后的map映射文件
  transpileDependencies: true,
  // lintOnSave: process.env.NODE_ENV === 'development',
  lintOnSave: false, // 关闭声明变量没有使用,然后报错的提示
  publicPath: "./",
  outputDir: "dist",
  assetsDir: "static",
  parallel: false,
  devServer: {
    port,
    open: false,
    proxy: {
      "/api": {
        target: process.env.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: { "/api": "" },
      },
    },
    // 开启mock数据
    // after: require("./mock/mock-server"),
  },
  configureWebpack: {
    name: name,
    resolve: {
      alias: {
        "@": resolve("src"),
      },
    },
    plugins: [
      new webpack.optimize.MinChunkSizePlugin({
        minChunkSize: 10000, // Minimum number of characters
      }),
    ],
  },
  // 打包忽略第三方库
  configureWebpack: (config) => {
    if (isProduction || devNeedCdn) config.externals = cdn.externals;
  },
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      if (isProduction || devNeedCdn) args[0].cdn = cdn;
      return args;
    });
    config.plugins.delete("prefetch");
    // 去除打包后的console.log
    config.optimization.minimizer("terser").tap((args) => {
      args[0].terserOptions.compress.drop_console = true;
      return args;
    });
    // 文件打包成压缩包，这样不用服务器频繁的去打包
    config.resolve.alias.set("@", resolve("src"));
    if (isProduction) {
      config.plugin("compressionPlugin").use(
        new CompressionPlugin({
          filename: "[path][base].gz",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8,
          deleteOriginalAssets: true,
        })
      );
    }
  },
});
